<template>
  <div id="echart_pie" style="width:100%; height:300px;"></div>
</template>

<script>
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  name: 'echart',
  props:['datalist'],
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawPie()
  },
  methods: {
    drawPie () {
          this.chart = this.$echarts.init(this.$el)
          this.chart.setOption({
            title: {
              text: this.$t('目的端口TOP20统计'),
              subtext: '',
              left: 'left'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                name: this.$t('端口 : 数量'),
                type: 'pie',
                radius: '70%',
                data: this.datalist,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
          this.chart.on('click', this.barClick)
    },
    barClick (data) {
      this.$router.push({
        name:'server',
        params:{
          filter_port:data.data.name
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
